<template>
	<div class="dialog-wrap">
		<div class="dialog-detail">
			<img src="@/assets/img/close.png" class="close" @click="close">
			
			<h1>3D创作学堂</h1>
			
			<div class="guide-content">
				<div class="left">
					<div ref="threeContainer" class="model-content"></div>
				</div>
				
				<div class="right">
					<p class="title">作品名标题作品名标题作品名标题作品名标题</p>
					<div class="model-operate">
						<div class="creater">
							<img :src='staticURL+modelInfo.headimg' v-if='modelInfo.headimg'/>
							<img src="@/assets/img/user-logo.png" v-else/>
							<p class="name">张韶涵</p>
						</div>
						
						<div class="tool-info">
							<span>
								<img src="@/assets/img/view.png" class="view"/>
								{{modelInfo.view_num ?? 0}}
							</span>
							<span @click.stop="collect">
								<img src="@/assets/img/collect-active.png" class="collect"v-if='modelInfo.is_collect == 1'>
								<img src="@/assets/img/collect.png" class="collect" v-else>
								{{modelInfo.collect_num ?? 0}}
							</span>
							<span @click.stop="like">
								<img src="@/assets/img/like-active.png" class="like" v-if='modelInfo.is_like == 1'>
								<img src="@/assets/img/like.png" v-else>
								{{modelInfo.like_num ?? 0}}
							</span>
						</div>
					</div>
					<div class="describe">
						<p>简介</p>
						<div class="desc">
							简介内容文字描述简介内容文字描述简介内容文字描述简介内容文字描述简介内容文字描述简介内
							容文字描述简介内容文字描述简介内容文字描述简介内容文字描述简介内容文字描述简介内容文字
							描述简介内容文字描述简介内容文字描述简介内容文字描述简介内容文字描述简介内容文字描述简
							介内容文字描述简介内容文字描述简介内容文字描述简介内容文字描述简介内容文字描述简介内容
							文字描述简介内容文字描述简介内容文字描述简介内容文字描述
						</div>
					</div>
				</div>	
			</div>
		</div>
	</div>
</template>

<script>
	import utils from '@/assets/js/utils';
	import {getModelDetail} from '@/api/model.js';
	export default {
		props: {
			model_id:{
				type: [String,Number],
				default: ""
			},
		},

		data() {
			return {
				modelDetail:{},
				modelInfo:{},
			}
		},
		
		created() {
			if(this.model_id){
				// this.getModelDetail()
			}
		},
		
		methods: {
			async getModelDetail(){
				const obj = {model_id: this.model_id};
				const {
					data,
					status
				} = await getModelDetail(obj);
				if (status !== 200) return;
				if(data.code == 200 && data.data){
					this.modelInfo = data.data.info || {};
				}
				else{
					this.modelInfo = {};
					this.$message.warning(data && data.message || '登录失败');
				}
			},
			
			close() {
				this.$emit('close');
			}
		}
	};
</script>

<style lang="scss" scoped>
	.dialog-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		z-index: 9;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		.dialog-detail {
			position: relative;
			width: 1200px;
			padding: 20px;
			border-radius: 10px;
			background: #FFFFFF;
			h1{
				font-weight: bold;
				font-size: 18px;
				color: #000000;
				margin-bottom: 15px;
			}
			.guide-content{
				border-radius: 10px;
				display: flex;
				justify-content: space-between;
				overflow: auto;
				.left{
					width: 58%;
					.model-content{
						width: 100%;
						height:100%;
					}
				}
				.right{
					padding: 20px;
					width: 40%;
					height: 600px;
					overflow: auto;
					border: 1px solid #CCCCCC;
					border-radius: 10px;
					.title{
						font-weight: 500;
						font-size: 20px;
						color: #333333;
					}
					.model-operate{
						@include flex-row;
						justify-content: space-between;
						margin: 15px 0;
						.creater{
							@include flex-row;
							img{
								display: block;
								width: 22px;
								height: 22px;
								border-radius: 50%;
							}
							.name{
								@include font-style;
								margin-left: 4px;
								font-size: 12px;
								color: #999999;
							}
						}
						
						.tool-info{
							@include flex-row;
							span{
								@include flex-row;
								font-size: 12px;
								color: #999999;
								img{
									display: block;
									margin-right: 4px;
								}
							}
							span:not(:last-child){
								margin-right: 10px;
							}
						}
					}
					.describe{
						p{
							font-size: 16px;
							color: #666666;
							margin-bottom: 15px;
						}
						.desc{
							font-size: 16px;
							color: #666666;
						}
					}
				}
			}
			.close {
				position: absolute;
				right: 20px;
				top: 20px;
				width: 20px;
				height: 20px;
				cursor: pointer;
			}

		}
	}
</style>
